<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/meyer-reset/2.0/reset.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/Swiper/4.5.0/css/swiper.min.css"
    />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/main.css" />
    <title>农家乐list详情</title>
    <style>
      .content {
        margin-top: 0;
      }

      body {
        background: #f5f5f5;
      }

      .swiper-pagination .ls-bullet {
        background: #ffffff;
        opacity: 1;
      }

      .swiper-pagination span {
        background: #ffffff;
        opacity: 0.7;
      }

      .L-swiper-child .swiper-img {
        height: 100%;
      }

      /* start */

      /* 不放在main */
      .t-inputSearch input {
        background: #f5f5f5;
      }

      .t-inputSearch input::placeholder {
        font-size: 0.81rem;
        font-weight: normal;
        color: #b2b2b2;
      }

      .t-textSearch {
        background: #f5f5f5;
        font-size: 0.81rem;
        font-weight: normal;
        color: #b2b2b2;
      }

      .no-comment {
        font-size: 0.69rem;
        font-weight: normal;
        color: #a5a5a5;
        margin-top: 0.5rem;
      }

      .midList-row-R {
        display: flex;
        align-items: center;
      }

      
    </style>
  </head>

  <body>
    <!-- 农家乐list详情 -->
    <div class="AreaListDesc">
      <div class="content">
        <!-- swiper滑动 -->
        <div class="swiper-container L-swiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide L-swiper-child">
              <img src="./img/agritainmentList-img.jpg" class="swiper-img" />
            </div>
            <div class="swiper-slide L-swiper-child">
              <img src="./img/agritainmentList-img.jpg" class="swiper-img" />
            </div>
            <div class="swiper-slide L-swiper-child">
              <img src="./img/agritainmentList-img.jpg" class="swiper-img" />
            </div>
          </div>
          <div class="swiper-pagination ls-bullet"></div>
        </div>
        <!-- 展开详情 -->
        <div class="list-describe">
          <div class="desc-top">
            <p class="desc-top-tit">彭水两江假日酒店</p>
            <p class="desc-top-f">
              <span class="desc-top-num"></span> 暂无评分
            </p>
          </div>
          <div class="desc-midList">
            <div class="midList-row">
              <div class="midList-row-L">
                <div class="position-LImg">
                  <img src="./img/AreaListDesc-ic2.png" style="width: 100%;" />
                </div>
                <span>
                  <p>重庆市彭水苗族土家族自治县</p>
                  <p>国本路30号大街</p>
                </span>
              </div>
              <div class="midList-row-R">
                <div class="go-btn">导航</div>
                <!-- <img src="./img/toUp.png" style="transform: rotate(-90deg)"> -->
              </div>
            </div>
            <div class="midList-row">
              <div class="midList-row-L">
                <div class="position-LImg">
                  <img src="./img/AreaListDesc-ic4.png" style="width: 100%;" />
                </div>
                <span>023-67062140</span>
              </div>
              <div class="midList-row-R">
                <!-- <img src="./img/toUp.png" style="transform: rotate(-90deg)"> -->
                <div class="go-btn">拨号</div>
              </div>
            </div>
            <!-- <div class="midList-row">
                        <div class="midList-row-L">
                            <div class="position-LImg">
                                <img src="./img/AreaListDesc-ic5.png" style="width: 100%;">
                            </div>
                            <span>
                                <p>0:00-24:00</p>
                                <p>建议时长：1-2小时</p>
                            </span>
                        </div>
                        <div class="midList-row-R" style="display: none;">
                            <img src="./img/toUp.png" style="transform: rotate(-90deg)">
                        </div>
                    </div> -->
          </div>
          <!-- <div class="desc-unfold">
                    展开详情
                </div> -->
        </div>
        <!-- 点评 -->
        <!-- <div class="comment">
                <div class="comment-top">
                    <h1>点评</h1>
                    <div class="comment-star" id="star" style="display: none;" data-num="4.5">

                    </div>
                </div>
                <div class="no-comment">
                    <span>暂无评分</span><span>0条评论</span>
                </div>
                <div class="comment-list" style="display: none;">
                    <div class="comment-list-out">
                        <div class="com-list-child">
                            <div class="comment-row-L">
                                <div class="comment-position-LImg">
                                    <img src="./img/comment-img.png" style="width: 100%;">
                                </div>
                                <span>
                                    <p>蔡徐坤</p>
                                    <p>鸡你太美strstr</p>
                                </span>
                            </div>
                            <div class="midList-row-R">
                                <img src="./img/toUp.png" style="transform: rotate(-90deg)">
                            </div>
                        </div>
                        <div class="com-list-child" style="display: none;">
                            <div class="comment-row-L">
                                <div class="comment-position-LImg">
                                    <img src="./img/comment-img.png" style="width: 100%;">
                                </div>
                                <span>
                                    <p>周淑芬</p>
                                    <p>喷子界大神</p>
                                </span>
                            </div>
                            <div class="midList-row-R">
                                <img src="./img/toUp.png" style="transform: rotate(-90deg)">
                            </div>
                        </div>
                        <div class="com-list-child" style="display: none;">
                            <div class="comment-row-L">
                                <div class="comment-position-LImg">
                                    <img src="./img/comment-img.png" style="width: 100%;">
                                </div>
                                <span>
                                    <p>洞主</p>
                                    <p>gdashjgasgdasdasd阿萨德巴哈是简单地是的是的复合弓说的很过分的改革非官方个公分发给过分过分发给
                                        奥术大师大所多撒大所多
                                    </p>
                                </span>
                            </div>
                            <div class="midList-row-R">
                                <img src="./img/toUp.png" style="transform: rotate(-90deg)">
                            </div>
                        </div>
                    </div>
                    <div class="desc-unfold" onclick="commentFn(this)">
                        展开评论
                    </div>
                </div>
                <div class="comment-bot">
                    <div class="t-inputSearch">
                        <img src="./img/comment-ic.png" style="width: 0.78rem;height: 0.78rem;">
                        <input type="text" name="" id="" placeholder="发表评论">
                    </div>
                    <div class="t-textSearch"><span>发表</span></div>
                </div>
            </div> -->
      </div>
      <div class="bot">
        <nav class="bot-nav">
          <a href="./home.html">
            <div class="nav-child-div">
              <img src="./img/homeIC-active.png" />
              <span>主页</span>
            </div>
          </a>
          <a href="./localProduct.html">
            <div class="nav-child-div">
              <img src="./img/localProductIC.png" />
              <span>特产</span>
            </div>
          </a>
          <a href="./shop.html">
            <div class="nav-child-div">
              <img src="./img/shopIC.png" />
              <span>店铺</span>
            </div>
          </a>
          <a href="./star.html">
            <div class="nav-child-div">
              <img src="./img/star.png" />
              <span>扶贫</span>
            </div>
          </a>
        </nav>
      </div>
    </div>
    <script src="./js/ft.js"></script>
    <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/raty/2.8.0/jquery.raty.min.js"></script>
    <script src="https://cdn.staticfile.org/Swiper/4.5.0/js/swiper.min.js"></script>
    <script>
      var swiper = new Swiper(".L-swiper", {
        spaceBetween: 30,
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          bulletActiveClass: "ls-bullet"
        },
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        }
      });
      $("#star").raty({
        score: function() {
          return $(this).attr("data-num");
        },
        starOn: "./img/star-on.png",
        starOff: "./img/star-off.png",
        starHalf: "./img/star-half.png",
        readOnly: false,
        halfShow: true,
        size: 34
      });
      function commentFn(dom) {
        $(".com-list-child")
          .eq(1)
          .show();
        $(".com-list-child")
          .eq(2)
          .show();
      }
    </script>
  </body>
</html>
